<template>
  <div>
    <el-dialog title="保险配置变更记录" :visible.sync="visible" width="70%" :close-on-click-modal='false'
      :before-close="handleClose">
      <div class="listBox">
        <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableDataTwo"
          @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange" keyString="assetId">
          <template v-slot:configurator="{ scope }">
            <p>{{ scope.row.configurator }}</p>
            <p v-if="scope.row.configuratorPhone">（{{ scope.row.configuratorPhone }}）</p>
          </template>
          <template v-slot:insType="{ scope }">
            <dict-tag :options="insTypeOptions" :value="scope.row.insType" />
          </template>
          <template v-slot:originalStartTime="{ scope }">
            <p>{{ scope.row.originalStartTime }}</p>
            <p>{{ scope.row.originalEndTime }}</p>
          </template>
          <template v-slot:changeStartTime="{ scope }">
            <p>{{ scope.row.changeStartTime }}</p>
            <p>{{ scope.row.changeEndTime }}</p>
          </template>
          <template v-slot:insRemitRatio="{ scope }">
            <p>{{ scope.row.insRemitRatio ? scope.row.insRemitRatio + '%' : '-' }}</p>
          </template>
          <template v-slot:insApplyRemitRatio="{ scope }">
            <p>{{ scope.row.insApplyRemitRatio ? Number(scope.row.insApplyRemitRatio) + '%' : '-' }}</p>
          </template>
          <template v-slot:insuranceContract="{ scope }">
            <el-link v-if="scope.row.insuranceContract != ''" :href="scope.row.insuranceContract" target="_blank">合约.pdf</el-link>
            <p v-else>-</p>
          </template>
          <template v-slot:reviewedBy="{ scope }">
            <p v-if="scope.row.reviewedBy == ''">-</p>
            <p>{{ scope.row.reviewedBy }}</p>
            <p v-if="scope.row.reviewedByPhone">（{{ scope.row.reviewedByPhone }}）</p>
          </template>

          <template v-slot:operate="{ scope }">
            <span style="margin-right: 5px">{{ scope.row.statusDict }}</span>
            <!-- <el-tooltip class="elTooltip" effect="dark" :content="scope.row.reason" placement="top"
              v-if="scope.row.status == 3">
              <span class="el-icon-question"></span>
            </el-tooltip> -->
          </template>
          <template v-slot:reason="{ scope }">
            <p >{{ scope.row.reason?scope.row.reason:'-' }}</p>
          </template>
        </ex-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  mapState
} from "vuex";
// components
import Loading from '@/components/Loading/index'
// api
import {
  insuranceAuditList, adminDict
} from "@/api/merchants";
import handlePageMixin from "@/mixins/handlePageMixin";
export default {
  components: {
    Loading
  },
  mixins: [handlePageMixin],
  props: {
    visible: Boolean,
    id: String,
    path: String,
  },
  data() {
    return {
      loading: false,
      insTypeOptions: [],
      cardData: {
        merchantId: "", //商家id
      },
      tableDataTwo: [],
      billTypeList: [],
      tableColumn: [
        {
          prop: "insType",
          label: "保险类型",
          slotName: "insType",
          slot: true,
        },
        {
          label: "申请人",
          width: 140,
          slotName: "configurator",
          slot: true,
        },
        {
          prop: "createTime",
          label: "申请时间",
          width: 160,
        },

        {
          prop: "changeTotal",
          label: "申请保额",
          width: 120
        },
        {
          label: "保险期限",
          width: 120,
          slotName: "changeStartTime",
          slot: true,
        },
        {
          label: "保险可划付比例",
          width: 150,
          slotName: "insRemitRatio",
          slot: true,
        },
        {
          label: "每月最高可提现比例",
          width: 150,
          slotName: 'insApplyRemitRatio',
          slot: true,
        },
        {
          label: "保险合约",
          width: 120,
          slotName: "insuranceContract",
          slot: true,
        },
        {
          label: "审核人",
          width: 150,
          slotName: "reviewedBy",
          slot: true,
        },
        {
          prop: "updateTime",
          label: "审核时间",
          width: 120
        },
        {
          label: "审核状态",
          slot: true,
          slotName: "operate",
          width: 120
        },
        {
          slot: true,
          slotName: "reason",
          label: "备注",
          width: 150
        },
      ],
    }
  },
  computed: {
    ...mapState({
      cardTypeList: function (state) {
        return state.common["asset_card_type"]; // 要取this的实例，只能用不同函数，不能用箭头函数
      },
    }),
  },
  created() {
    console.log(this.id)
    this.getInsTypeOptions()
    this.getList()
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    getInsTypeOptions() {
      //获取保险类型
      const params = {
        dictType: "merchant_ins_type",
      };
      adminDict(params).then((res) => {
        this.insTypeOptions = res.result[0].dictList;
      });
    },
    getList() { //查询商家所有的卡列表
      this.cardData.merchantId = this.id
      const params = {
        ...this.pageOptions,
        ...this.cardData,
      };
      this.loading = true;
      insuranceAuditList(params)
        .then((res) => {
          res.result.records.forEach((item) => {
            if (item.updateTime == '') {
              item.updateTime = '-'
            }
          });
          this.tableDataTwo = res.result.records;
          this.$refs.table.pageOptions.total = res.result.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  }
}

</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
  }
}

.dia_detail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.dia_detail_l {
  width: 160px;
  text-align: right;
}

.dia_detail_r {
  display: flex;
  align-items: center;
}

.listBox_head {
  margin-bottom: 10px;
}

.elTooltip {
  cursor: pointer;
}
</style>
